<template>
	<div class="add">
		<el-form label-width="100px" :model="addData">
			<el-form-item>
				<h1 style="text-align: center;flex: 1;">添加用户</h1>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input type="text" v-model="addData.name"/>
			</el-form-item>
			<el-form-item label="描述">
				<el-input type="textarea" v-model="addData.desc"/>
			</el-form-item>
			<el-form-item label="头像">
				<el-input type="text" />
			</el-form-item>
			<el-form-item label="电话">
				<el-input type="text" v-model="addData.tel"/>
			</el-form-item>
			<el-form-item label="类型">
				<el-radio-group v-model="addData.type">
					<el-radio v-for="(v, i) in types" :key="i" :label="v"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button @click="handleAdd">添加</el-button>
				<el-button>重置</el-button>
			</el-form-item>
		</el-form>

		
	</div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { addListItem } from '@/api'
import { ElMessage } from 'element-plus'
const addData = reactive({
	'name': '',
	'tel': '',
	'desc': '',
	'avatar': '',
	'type': '学生'
})

const types = ['学生', '讲师', '辅导员', '主任', '院长', '校长', '处长']

const handleAdd = async () => {
	const resp = await addListItem(addData)
	const { code } = resp.data
	if(code === 200) {
		ElMessage({
			type: 'success',
			message: '添加成功！！'
		})
	} else {
	ElMessage({
			type: 'error',
			message: '添加失败！！'
		})
	}
}


</script>

<style lang="scss" scoped>
.add {
	padding: 20px;
}
</style>